<!--
 * @Author: wq
 * @Date: 2024-08-12
-->
<template>
	<div class="login">
		<div class="login-form">
			<span class="login-title"> 数生城市 </span>
			<div v-if="isLogin">
				<el-tabs class="login-tabs" :stretch="true" v-model="activeName">
					<el-tab-pane label="验证码登录" name="auth">
						<authCode></authCode>
					</el-tab-pane>
					<el-tab-pane label="账号登录" name="account">
						<AccountLogin @signInSuccess="signInSuccess" />
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useMessage } from '/@/hooks/message';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { useI18n } from 'vue-i18n';
import { NextLoading } from '/@/utils/loading';

// 修正导入路径，使用 defineAsyncComponent 异步加载组件
const AccountLogin = defineAsyncComponent(() => import('./component/loginContainer/accountLogin.vue'));
const authCode = defineAsyncComponent(() => import('./component/loginContainer/authCode.vue'));
const route = useRoute();
const router = useRouter();
// 响应式数据
const isLogin = ref(true);
const activeName = ref('account');
const { t } = useI18n();
const signInSuccess = async () => {
	const isNoPower = await initBackEndControlRoutes();
	if (isNoPower) {
		useMessage().wraning('抱歉，您没有登录权限');
		Session.clear();
	} else {
		// 初始化登录成功时间问候语
		let currentTimeInfo = formatAxis(new Date());
		if (route.query?.redirect) {
			router.push({
				path: <string>route.query?.redirect,
				query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
			});
		} else {
			router.push('/');
		}
		// 登录成功提示
		const signInText = t('signInText');
		useMessage().success(`${currentTimeInfo}，${signInText}`);
		// 添加 loading，防止第一次进入界面时出现短暂空白
		NextLoading.start();
	}
};
// 返回方法
const goBack = () => {
	isLogin.value = true;
};
</script>

<style scoped lang="scss">
.login {
	width: 100%;
	height: 100%;
	background: url('/@/assets/login/loginBg.png') no-repeat center;
	background-size: 100% 100%;

	.logo {
		background-image: url('../assets/images/login/logo.png');
		width: 128px;
		height: 35px;
		background-size: 100% 100%;
		position: absolute;
		top: 60px;
		left: 80px;
	}

	.line {
		width: 2px;
		height: 28px;
		background-color: rgba(49, 86, 165, 0.7);
		position: absolute;
		top: 65px;
		left: 225px;
		/* border-radius: 0px 0px 0px 0px; */
	}

	.title-text {
		position: absolute;
		top: 64px;
		left: 240px;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 20px;
		color: rgba(49, 86, 165, 0.7);
	}

	.login-form {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 431px;
		height: 403px;

		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0px 0px 21px 0px rgba(62, 85, 149, 0.3);
		border-radius: 12px 12px 12px 12px;
	}

	.login-title {
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: bold;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		margin-top: 30px;
		font-size: 24px;
		color: #28437c;
		line-height: 30px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.add-back {
		cursor: pointer;
		position: absolute;
		margin-top: 50px;
		margin-left: 48px;
	}

	.login-tabs {
		width: 336px;
		margin-top: 96px;
		position: absolute;
		left: 50%;
		transform: translate(-50%);

		:deep(.el-tab-pane) {
			border: 0;
			padding: 1px;
		}

		:deep(.el-tabs__item) {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 18px;
			height: 28px;
			line-height: 21px;
			color: rgba(49, 86, 165, 0.4);
		}

		:deep(.is-active) {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			line-height: 21px;
			font-size: 18px;
			color: #3156a5;
		}
	}
}
// :deep(.el-tabs__active-bar) {
// 	width: 97px !important;
// 	transform: translateX(144px) !important;
// }
</style>
